<template>
	<view class="container">
		<view class="logo text-center mt-20 mb-20">
			<image src="/static/logo.png" mode="aspectFit" style="width: 150rpx; height: 150rpx;" class="logo-animation"></image>
			<text class="block mt-20" style="font-size: 36rpx; font-weight: bold;">欢迎使用旅游助手</text>
		</view>
		
		<view class="card">
			<view class="input-item flex align-center mb-20">
				<text class="iconfont icon-user" style="font-size: 40rpx; margin-right: 20rpx; color: #4caf50;"></text>
				<input type="text" v-model="form.username" placeholder="请输入用户名/手机号" style="flex: 1;" />
			</view>
			<view class="input-item flex align-center mb-20">
				<text class="iconfont icon-lock" style="font-size: 40rpx; margin-right: 20rpx; color: #4caf50;"></text>
				<input type="password" v-model="form.password" placeholder="请输入密码" style="flex: 1;" />
			</view>
			
			<view class="button login-btn" :class="{ 'loading': isLoading }" @click="login">
				<text v-if="!isLoading">登录</text>
				<view v-else class="loading-animation">
					<view class="loading-dot"></view>
					<view class="loading-dot"></view>
					<view class="loading-dot"></view>
				</view>
			</view>
			
			<view class="flex justify-between mt-20">
				<text @click="goToRegister">立即注册</text>
				<text class="text-primary">忘记密码？</text>
			</view>
		</view>
		
		<view class="other-login text-center mt-20">
			<text class="block mb-20">其他登录方式</text>
			<view class="flex justify-center">
				<text class="iconfont icon-wechat" style="font-size: 60rpx; color: #07c160; margin: 0 30rpx;"></text>
				<text class="iconfont icon-qq" style="font-size: 60rpx; color: #12b7f5; margin: 0 30rpx;"></text>
				<text class="iconfont icon-weibo" style="font-size: 60rpx; color: #f13f3f; margin: 0 30rpx;"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				isLoading: false
			}
		},
		methods: {
			login() {
				if (!this.form.username || !this.form.password) {
					uni.showToast({
						title: '请输入用户名和密码',
						icon: 'none'
					})
					return;
				}
				
				// 模拟登录请求
				this.isLoading = true;
				
				// 模拟网络延迟
				setTimeout(() => {
					// Mock数据验证
					const mockUsers = [
						{ username: 'admin', password: '123456', id: 1, avatar: '/static/avatar.jpg' },
						{ username: 'user', password: '123456', id: 2, avatar: '/static/avatar.jpg' }
					];
					
					const user = mockUsers.find(u => 
						u.username === this.form.username && u.password === this.form.password
					);
					
					if (user) {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						
						// 存储用户信息
						uni.setStorageSync('isLogin', true);
						uni.setStorageSync('userInfo', {
							id: user.id,
							username: user.username,
							avatar: user.avatar
						});
						
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: '用户名或密码错误',
							icon: 'none'
						})
						this.isLoading = false;
					}
				}, 1500); // 模拟1.5秒网络延迟
			},
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/index'
				})
			}
		}
	}
</script>

<style>
	.input-item {
		border-bottom: 1rpx solid #eee;
		padding-bottom: 20rpx;
	}
	
	.logo-animation {
		animation: bounce 2s infinite;
	}
	
	@keyframes bounce {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-20rpx);
		}
	}
	
	.login-btn {
		position: relative;
		overflow: hidden;
	}
	
	.login-btn.loading {
		background: #4caf50; /* 绿色加载按钮 */
	}
	
	.loading-animation {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.loading-dot {
		width: 20rpx;
		height: 20rpx;
		background: #fff;
		border-radius: 50%;
		margin: 0 10rpx;
		animation: loading 1.4s infinite ease-in-out both;
	}
	
	.loading-dot:nth-child(1) {
		animation-delay: -0.32s;
	}
	
	.loading-dot:nth-child(2) {
		animation-delay: -0.16s;
	}
	
	@keyframes loading {
		0%, 80%, 100% {
			transform: scale(0);
		}
		40% {
			transform: scale(1);
		}
	}
</style>